<template>
    <div class="mainNewEmail">
      <el-card class="cardNewEmail">
          <div class="top-container-new">
            <div style="display: flex;">
                <el-text >标题:&nbsp;&nbsp;&nbsp;</el-text>
                <el-input placeholder="请输入标题" style="width: 80%;margin-left: 10px;" v-model="titleMessage"/>
            </div>
            <div v-if="getAdmin() === '1'||'0'" style="display: column;"> 
                <el-text style="margin-top: 5px;">发件人:&nbsp;&nbsp;&nbsp;{{newMessageData.sender}}</el-text>
                <div></div>
                <el-text style="margin-top: 5px;">收件人:&nbsp;&nbsp;&nbsp;admin</el-text>
            </div>
            <div v-if="getAdmin() === 2">
                <el-text style="margin-top: 5px;">发件人:&nbsp;&nbsp;&nbsp;admin</el-text>
                <div style="display: flex;margin-top: 5px;">
                    <el-text>收件人:</el-text>
                    <el-input placeholder="请输入收件人账户名" style="width: 80%;margin-left: 10px;"/>
                </div>
            </div>     
          </div>
          <textarea class="newEmailText" placeholder="请输入正文内容" v-model="message"></textarea>
          <el-button class="addEmailBtn" type="primary" plain @click="writeLetter">发送</el-button>
      </el-card>
    </div>
  </template>

<script scoped>
import axios, { AxiosError } from 'axios'
export default {
    name:   'NewEmail',
    data(){
      return{
        newMessageData:{
                letter:'',
                msgType:0,
                sender:localStorage.getItem('username'),
                recipient:'admin'
        },
        titleMessage:'',
        message:''
      }
    },
    methods:{
        getAdmin(){
          console.log(localStorage.getItem('admin'))
            return localStorage.getItem('admin')
        },
        //使用结构赋值进行异常处理
        promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
        },
        async writeLetterByAjax(){
            const response = await axios({
            url				      : 'http://127.0.0.1:8080/api/column/writeLetter',
            method			    : 'POST',
            withCredentials : true,
            headers			: {
                        'Content-Type'	: 'application/json'
                        },
            data : this.newMessageData    
            })
                return response
        },
        async writeLetter(){
          if(this.titleMessage === '')
            console.log('标题不能为空！')
          else if(this.message === '')
            console.log('正文内容不能为空！')
          else{
            this.newMessageData.letter = this.titleMessage+'/'+this.message
          const [err,result] = await this.promise_error_process(this.writeLetterByAjax())
          if(err)
              console.log(err)
          else
              console.log(result)
          }
        }
    }
    
}
</script>

<style>
.mainNewEmail {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  position: absolute; /* 设置 test 为相对定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.cardNewEmail{
  width: 80%;
  height: 60%;
}

.left-container-new{
  text-align: left;
}
.topicNew{
  font-weight: bold; /* 文本加粗 */
  font-size: 16px; /* 增大字体大小 */
}
.top-container-new{
  text-align: left;
}
.newEmailText{
    margin-top: 15px;
    width: 100%;
    height: 300px;
    border-color: #ccc;
    font-size: 18px;
}
.addEmailBtn{
    font-size: 20px;
    margin-top: 20px;
}
</style>